﻿/*
 @Name project: 
 @Coding : Nguyễn Trần Minh Trung
 @Date: 08/08/2014
 */
        $.fn.fs_SlideShow = function(option) {
            var auto = null;
            var id_Slide = 'A_' + Math.floor(Math.random() * 100000);
            var that = $(this).find('div.SlideShow');
            var def_option = {
                width: ($(this).find('img:first').width() + 5),
                height: ($(this).find('img:first').height() + 5),
                style: {
                    /*
                     * Kiểu sắp xếp ảnh
                     * default: ảnh chồng nhau
                     * inline: ảnh sắp theo 1 đường thẳng
                     * stack: xếp chồng nhau với ảnh trên cùng nhỏ hơn ảnh khác
                     */
                    type: 'default',
                    //Số hình hiện trên slide
                    num_Img: 5
                },
                //Nút qua ảnh
                but_Slide: false,
                //Khung chứa ảnh nhỏ
                box_Img: {
                    //Số lượng ảnh nhỏ
                    num_Img: 4,
                    /*
                     * Cách đặt khung ảnh
                     * in: nằm trong khung ảnh và canh theo vị trí
                     * out: nằm ngoài khung ảnh và canh theo vị trí
                     */
                    type: 'in',
                    /*
                     * Vị trí khung ảnh
                     * 
                     */
                    position: '',
                    //Nút qua ảnh
                    but_Slide: false,
                    /*
                     * Tác động chuyển ảnh lớn.Có 2 tác động:
                     * hover
                     * click
                     */
                    event: 'hover'
                },
                affect: {
                    /*
                     * normal (Mặc định): ảnh trên mờ dần hiện ra ảnh tiếp theo
                     * slideVer : ảnh trượt lên
                     * slideHor : ảnh trượt ngang
                     */
                    type: 'slideVer',
                    time: 2000
                },
                /*
                 * ảnh sẽ sẽ tự chạy lên xuống
                 * Lưu ý: ảnh phải nhỏ hơn khung(chiều dọc)
                 */
                autoUpDown: false,
                //Thời gian tự động lặp hiệu ứng
                timeInterval: 0,
                //Tự chuyển ảnh
                autoSlide: false
            };
            option = $.extend(def_option, option);

            function set_Style() {
                that.css({
                    width: option.width + 'px',
                    height: option.height + 'px',
                    overflow: 'hidden'
                });
                switch (option.style.type) {
                    case 'inline':
                        var marginLeft = ((option.width - (that.find('img').width() * option.style.num_Img)) / option.style.num_Img) / 2;
                        that.children().css({
                            float: 'left',
                            margin: '0px ' + (marginLeft - 1),
                            marginBottom: '10px'
                        });
                        break;
                    case 'stack':
                        var hei = that.find('img:first').height();
                        var wid = that.find('img:first').width();
                        var widAdd = ((option.width - 10) - that.find('img:first').width()) / (that.find('img').length - 1);
                        that.find('img').each(function() {
                            $(this).width(wid);
                            $(this).height(hei);
                            hei -= 20;
                            wid += widAdd;
                        });
                        set_Link();
                        break;
                    default:
                        set_Link();
                        break;
                }
            }

            function set_Link() {
                var i = $(that).children().length;
                that.children().each(function() {
                    $(this).css({
                        position: 'absolute',
                        'z-index': i,
                        width: $(this).find('img').width(),
                        height: $(this).find('img').height(),
                        margin: ((that.height() - $(this).find('img').height()) / 2) + ' ' + ((that.width() - $(this).find('img').width()) / 2) + 'px'
                    });
                    i--;
                });
            }

            function but_Slide() {
                if (option.but_Slide) {
                    var div_But = '';
                    div_But += '<div class="But_Slide But_Prev"><img width="' + (option.height / 8) + 'px" src="' + lnk + 'fs_SlideShow/img/Prev.png" /></div>';
                    div_But += '<div class="But_Slide But_Next"><img width="' + (option.height / 8) + 'px" src="' + lnk + 'fs_SlideShow/img/Next.png" /></div>';
                    div_But += '';
                    that.after(div_But);
                    $('.But_Slide').css({
                        position: 'absolute',
                        background: '#363636',
                        marginTop: -((that.height() + $('.But_Slide img').height()) / 2),
                        cursor: 'pointer',
                        'z-index': 9999
                    });
                    $('.But_Slide img').css('box-shadow', 'none');
                    $('.But_Next').css('marginLeft', (that.width() - $('.But_Slide img').width()) + 'px');
                    butNext_Click();
                    butPrev_Click();
                }
            }

            $.fn.affect_Def = function(affect, dad_Obj, type) {
                var max_len = $(dad_Obj).children().length + 1;
                affect = affect.length < 1 ? option.affect.type : affect;
                var tht = $(this);
                var obj = type === 1 ? $(this) : $(dad_Obj).children().first();
                switch (affect) {
                    case 'slideVer':
                        type === 1 ? obj.animate({'opacity': 0, 'marginTop': '-=' + option.height}, option.affect.time) : obj.animate({'opacity': 0, 'marginTop': '+=' + option.height}, option.affect.time);
                        break;
                    case 'slideHor':
                        type === 1 ? obj.animate({'opacity': 0, 'marginLeft': '-=' + option.width}, option.affect.time) : obj.animate({'opacity': 0, 'marginLeft': '+=' + option.width}, option.affect.time);
                        break;
                    default:
                        obj.animate({'opacity': 0}, option.affect.time);
                        break;
                }

                setTimeout(function() {
                    type === 1 ? obj.next().css({'z-index': max_len}) : tht.css({'z-index': max_len});
                    obj.css({'z-index': 1});
                }, option.affect.time);
                switch (affect) {
                    case 'slideVer':
                        type === 1 ? obj.animate({'marginTop': '+=' + option.height}, 0) : obj.animate({'marginTop': '-=' + option.height}, 0);
                        break;
                    case 'slideHor':
                        type === 1 ? obj.animate({'marginLeft': '+=' + option.width}, option.affect.time) : obj.animate({'marginLeft': '-=' + option.width}, option.affect.time);
                        break;
                    default:
                        break;
                }
                type === 1 ? obj.next().css({opacity: 1}) : tht.css({opacity: 1});
                type === 1 ? obj.appendTo(dad_Obj) : tht.prependTo(dad_Obj);

            };

            $.fn.affect_Stack = function() {
                
                var tht = $(this);
                tht.children().click(function() {
                    var enable=false;
                    var ths = $(this);
                    var zInT = parseInt(ths.css('z-index'));
                    var first = tht.children().first();
                    var zInF = parseInt(first.css('z-index'));
                    var thsM = ths;
                    while (zInT < zInF) {
                        first = tht.children().first();
                        zInF = parseInt(first.css('z-index'));
//                        alert(zInF+' '+zInT);
                        if ((zInF - zInT !== 1)) {
                            var prev = ths.prev();
                            setTimeout(function() {
                                prev.animate({'z-index': ths.css('z-index'), width: ths.width(), height: ths.height(), marginLeft: ths.css('marginLeft'), marginTop: ths.css('marginTop')}, option.affect.time);
                                prev.find('img').animate({width: ths.width(), height: ths.height()});
                                ths.animate({'z-index': prev.css('z-index'), width: prev.width(), height: prev.height(), marginLeft: prev.css('marginLeft'), marginTop: prev.css('marginTop')}, option.affect.time);
                                ths.find('img').animate({width: prev.width(), height: prev.height()});
                                prev.after(ths);
                                thsM = ths.prev();
                            }, option.timeInterval);
                        } else {
                            thsM.after(first);
//                            alert('f-' + thsM.find('img').attr('src'));
                            ths.animate({'z-index': zInF, width: first.width(), height: first.height(), marginLeft: first.css('marginLeft'), marginTop: first.css('marginTop')}, option.affect.time);
                            ths.find('img').animate({width: first.width(), height: first.height()});
                            first.animate({'z-index': thsM.css('z-index'), width: thsM.width(), height: thsM.height(), marginLeft: thsM.css('marginLeft'), marginTop: thsM.css('marginTop')}, option.affect.time);
                            first.find('img').animate({width: thsM.width(), height: thsM.height()});
                            break;
                        }
                        zInT++;
                        
                    }
                    enable ? $(this).bind('click') : $(this).unbind('click');
//                    var item = tht.children().toArray();
//                    item.sort(function(a, b) {
//                        var aVal=Number(a.style.zIndex);
//                        var bVal=Number(b.style.zIndex); 
//                        return bVal > aVal ? 1 : -1;
//                    });
//                    tht.html(item);
                    
                });

            };

            function butNext_Click() {
                $('.But_Next').click(function() {
                    that.children().first().affect_Def('', that, 1);
                    if (auto !== null) {
                        clearInterval(auto);
                    }
                });
            }

            function butPrev_Click() {
                $('.But_Prev').click(function() {
                    that.children().last().affect_Def('', that, 2);
                    if (auto !== null) {
                        clearInterval(auto);
                    }
                });
            }

            function upDown() {
                var upDown = (that.height() - that.find('img:first').height()) / 2;
                var upInter = setInterval(function() {
                    that.find('img:first').animate({marginTop: upDown}, option.affect.time);
                    setTimeout(function() {
                        that.find('img:first').animate({marginTop: 0}, option.affect.time);
                    }, option.affect.time);
                }, option.timeInterval);
                clearInterval(upInter);
            }

            function autoSlide() {
                var affect = ['slideVer', 'slideHor', 'normal', 'UpDown'];
                auto = setInterval(function() {
                    var ran = Math.floor(Math.random() * ((affect.length - 1) - 0 + 1) + 0);
                    if (affect[ran] === 'UpDown') {
                        upDown();
                    } else {
                        that.children().first().affect_Def(affect[ran], that, 1);
                    }
                }, option.timeInterval);
            }

            return this.each(function() {
                $(this).css({
                    width: option.width + 'px',
                    height: option.height + 'px'
                });
                set_Style();
                but_Slide();
                if (option.autoUpDown) {
                    upDown();
                }
                if (option.autoSlide) {
                    autoSlide();
                }

                that.affect_Stack();
            });

        };